<template>
	<el-dialog title="规格选择" :visible.sync="createModel" width="80%" top="5vh">
		<el-container style="height: 70vh;position: relative;margin: -30px -20px;">
			<el-container>
				<el-aside width="200px" style="position: absolute;top: 0px;left: 0;bottom: 50px;" class="bg-white border-right">
					<!-- 侧边 -->
					<ul class="list-group list-group-flush">
						<li class="list-group-item list-group-item-action"
						v-for="(item, index) in skusList" :key="index"
						:class="index === skuIndex ? 'sum-active' : ''"
						@click="changeSku(index)">{{item.name}}</li>
					</ul>
				</el-aside>
				<el-footer style="position: absolute;left: 0;bottom: 0;height: 50px;width: 200px;display: flex;align-items: center;justify-content: center;"
				class="border">
					<el-pagination
					 @size-change="handleSizeChange" 
					 @current-change="handleCurrentChange" 
					 :current-page="page.current"
					 :page-sizes="page.sizes" 
					 :page-size="page.size" 
					 layout="prev, next" 
					 :total="page.total">
					</el-pagination>
				</el-footer>
				<el-container>
					<el-header style="position: absolute; top: 0;right:0;left: 200px;height: 60px;line-height: 60px;" class="border-top border-bottom align-items-center">
						<el-button type="primary" size="mini"
						@click="doChooseAll">
							{{isChooseAll ? '取消全选' : '全选'}}
						</el-button>
					</el-header>
					<el-main style="position: absolute;top: 60px;left: 200px;bottom: 0px;right: 0;">
						<!-- 主内容 -->
						<div class="d-flex flex-wrap">
							<span class="border rounded py-1 px-2 m-2" 
							style="cursor: pointer;"
							v-for="(item, index) in skuItems" :key="index"
							:class="item.ischeck ? 'sum-active' : ''"
							@click="choose(item)">{{item.name}}</span>
						</div>
					</el-main>
				</el-container>
			</el-container>
		</el-container>
		<span slot="footer" class="dialog-footer">
			<el-button @click="createModel = false">取 消</el-button>
			<el-button type="primary" @click="confirm">确 定</el-button>
		</span>
	</el-dialog>
</template>

<script>
	import common from "@/common/mixins/common.js";
	
export default {
	mixins: [common],
	
	computed: {
		skuItems() {
			let item = this.skusList[this.skuIndex]
			return item ? item.list : []
		},
		
		//是否全选
		isChooseAll() {
			return this.skuItems.length === this.choosedList.length
		}
	},

	data() {
		return {
			preUrl: "skus",
			
			loading: false,
			
			createModel: false,
			callback: false,

			choosedList: [],
			
			skuIndex: 0,
			//数据
			skusList: []
		};
	},

	methods: {
		//getListResult重写
		getListResult(e) {
			this.skusList = e.list.map(item => {
				let list = item.default.split(',')
				item.list = list.map(v => {
					return {
						name: v,
						image:'',
						color: '',
						ischeck: false
					}
				})
				return item
			})
		},
		
		//打开弹出层
		chooseSkus(callback) {
			this.callback = callback;
			this.createModel = true;
			this.changeSku(0)
		},

		hide() {
			this.unChooseAll()
			this.createModel = false;
			this.callback = false;
		},

		confirm() {
			if (typeof this.callback === 'function') {
				let item = this.skusList[this.skuIndex]
				this.callback({
					id: item.id,
					name: item.name,
					type: item.type,
					list: this.choosedList
				});
			}
			//选中的图片url返回
			this.hide();
		},
		
		//切换规格卡片
		changeSku(index) {
			this.unChooseAll()
			this.skuIndex = index
		},
		
		//选中规格属性
		choose(item) {
			if(!item.ischeck) {
				this.choosedList.push(item)
				return item.ischeck = true
			}
			//之前选中，找到当前对象在choosedList中的索引
			let index = this.choosedList.findIndex(v => {
				return v.id === item.id
			})
			if (index < 0) return
			this.choosedList.splice(index, 1)
			item.ischeck = false
		},
		
		//全选 取消全选
		doChooseAll() {
			let list = this.skusList[this.skuIndex].list
			if (this.isChooseAll) {
				//取消选中状态
				return this.unChooseAll()
			}
			this.choosedList = list.map(v => {
				v.ischeck = true
				return v
			})
		},
		//取消选中所有
		unChooseAll() {
			let list = this.skusList[this.skuIndex].list
			list.forEach(v => {
				v.ischeck = false
			})
			//清空
			return this.choosedList = []
		}
		
	}
};
</script>

<style>
.sum-active {
	background-color: teal;
	color: #ffffff;
}
</style>
